/**活动基本信息 */
import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Col,
  Row,
  DatePicker,
  message,
  Upload,
  Button,
  Cascader,
  Space,
} from 'antd';
import {
  LoadingOutlined,
  PlusOutlined,
  InfoCircleFilled,
  DeleteOutlined,
} from '@ant-design/icons';

import type { RcFile } from 'antd/es/upload/interface';
import { loginApi } from '@/api/login';
import styles from './index.less';

const { RangePicker }: { RangePicker: any } = DatePicker;
const { TextArea } = Input;

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const EssentialInformation = (props: {
  EssentialInformationForm: any;
  abbreviationstatus: any;
  setAbbreviationStatus: any;
  activityStatus: any;
  setActivityStatus: any;
  options: any;
  loadData: any;
}) => {
  const {
    EssentialInformationForm,
    abbreviationstatus,
    setAbbreviationStatus,
    activityStatus,
    setActivityStatus,
    options,
    loadData,
  } = props;

  //活动图

  const [activityLoading, setActivityLoading] = useState(false);

  const activityNormFile = (e: any) => {
    if (e.file.status === 'uploading') {
      setActivityLoading(true);
    } else {
      setActivityLoading(false);
    }
    if (e.fileList.length > 0) {
      setActivityStatus(true);
    } else {
      setActivityStatus(false);
    }
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  const activityUploadButton = (
    <div>
      {activityLoading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>添加图片</div>
    </div>
  );
  //缩略图
  const [abbreviationLoading, setAbbreviationLoading] = useState(false);

  const abbreviationNormFile = (e: any) => {
    if (e.fileList.length > 0) {
      setAbbreviationStatus(true);
    } else {
      setAbbreviationStatus(false);
    }
    if (e.file.status === 'uploading') {
      setAbbreviationLoading(true);
    } else {
      setAbbreviationLoading(false);
    }

    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  const abbreviationUploadButton = (
    <div>
      {abbreviationLoading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>添加图片</div>
    </div>
  );

  //日程活动
  return (
    <div>
      {console.log(activityStatus)}

      <div style={{ marginBottom: 20 }}>请填写活动的基本信息</div>
      <Form
        form={EssentialInformationForm}
        name="control-hooks"
        layout="vertical"
        autoComplete="off"
      >
        <Row>
          <Col span={12}>
            <Form.Item
              name="activityName"
              label="活动名称"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input placeholder="请输入活动名称" style={{ width: 400 }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="provinceCode"
              label="地区选择"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Cascader
                options={options}
                loadData={loadData}
                changeOnSelect
                placeholder="请选择活动所属地区"
                style={{ width: 400 }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="date"
              label="活动时间"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <RangePicker showTime style={{ width: 400 }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="activitySite" label="活动地点">
              <Input placeholder="请输入活动地点" style={{ width: 400 }} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="activityOrganizers" label="活动主办方">
              <Input placeholder="请输入活动主办方" style={{ width: 400 }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="activityContent"
              label="活动内容"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <TextArea
                rows={4}
                placeholder="请输入活动内容"
                style={{ width: 400 }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="picture"
              label="活动图"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
              valuePropName="fileList"
              getValueFromEvent={activityNormFile}
              extra={
                <div>
                  <InfoCircleFilled style={{ color: '#FFB65A' }} />
                  &nbsp; 推荐尺寸：1035*261
                </div>
              }
            >
              <Upload
                name="multipartFile"
                listType="picture-card"
                action="/campus/campusweb/upload/pictureUpload"
                beforeUpload={beforeUpload}
                maxCount={1}
                className={styles['Activity-diagram']}
              >
                {activityStatus ? '' : activityUploadButton}
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="thumbnailPicture"
              label="缩略图"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
              valuePropName="fileList"
              getValueFromEvent={abbreviationNormFile}
              extra={
                <div>
                  <InfoCircleFilled style={{ color: '#FFB65A' }} />
                  &nbsp; 推荐尺寸：168*216
                </div>
              }
            >
              <Upload
                name="multipartFile"
                listType="picture-card"
                action="/campus/campusweb/upload/pictureUpload"
                beforeUpload={beforeUpload}
                maxCount={1}
              >
                {abbreviationstatus ? '' : abbreviationUploadButton}
              </Upload>
            </Form.Item>
          </Col>
        </Row>
        <div style={{ marginBottom: 10, fontWeight: 700, fontSize: 16 }}>
          请编辑活动日程规划<span style={{ fontSize: 8 }}>（可添加多条）</span>
        </div>

        <Form.List name="scheduleVOS">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <div key={key}>
                  <div style={{ marginBottom: 10 }}>日程名称</div>
                  <Space
                    style={{ display: 'flex', marginBottom: 8 }}
                    align="baseline"
                  >
                    <Form.Item
                      {...restField}
                      name={[name, 'scheduleName']}
                      rules={[
                        { required: true, message: 'Missing first name' },
                      ]}
                    >
                      <Input
                        style={{ width: 400, marginRight: 10 }}
                        placeholder="请输入日程名称"
                      />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'scheduleDate']}
                      rules={[{ required: true, message: 'Missing last name' }]}
                    >
                      <DatePicker placeholder="请选择日程时间" />
                    </Form.Item>
                    <DeleteOutlined
                      onClick={() => remove(name)}
                      style={{ color: 'red' }}
                    />
                  </Space>
                </div>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                  style={{ width: 400 }}
                >
                  添加
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
};
export default EssentialInformation;
